<template>
  <div>
    <el-form-item label="查询距离：">
      <el-input-number v-model="configValue.queryDistance" :min="0" :precision="1" :step="1000" controls-position="right" placeholder="门店列表查询距离">
        <template #suffix>
          <span>米</span>
        </template>
      </el-input-number>
      <span class="tip">门店列表查询距离范围</span>
    </el-form-item>

    <el-form-item label="门店管理者：">
      <SelectRemote v-if="!readonly" v-model="managerAccount" api-url="/search/user/list" placeholder="请输入用户账号进行选择" @change="handleSelectRemoteChange" style="margin-bottom: 8px;width: 60%"/>
      <el-select v-model="managerIds" multiple style="max-width: 90%" @change="handleSelectChange" placeholder="请在上方操作选择账号">
        <el-option v-for="item in managerList" :key="item.uid" :label="item.account" :value="item.uid"/>
      </el-select>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { SelectRemote } from '@/components/other';
import { PropType, ref } from 'vue';
import { StoreManager } from '@/api/api-store.ts';

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  managerList: {
    type: Array as PropType<StoreManager[]>,
    default() {
      return []
    }
  }
});

const managerIds = ref<number[]>([])
const managerAccount = ref();

/** 重置数据 */
const handleResetData = () => {
  managerIds.value = props.managerList.map(item => item.uid);
  managerAccount.value = '';
};

// 提供对外方法
defineExpose({handleResetData});

/** 用户选择被改变 */
const handleSelectRemoteChange = (val: any) => {
  if (val && val.id && !props.managerList.find(it => it.uid == val.id)) {
    props.managerList.push({uid: val.id, account: val.label1});
    managerIds.value.push(val.id);
  }
};

const handleSelectChange = () => {
  let ids = managerIds.value;
  if (ids.length == 0) {
    props.managerList.splice(0, props.managerList.length)
  } else {
    // 过滤出符合条件的数据
    let items = props.managerList.filter(it => ids.includes(it.uid));
    // 将数据清空
    props.managerList.splice(0, props.managerList.length)
    // 重新添加数据
    items.forEach(it => props.managerList.push(it));
  }
}

</script>

<style scoped lang="scss">

</style>
